const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        another: './src/another-module.js'
    },
    devServer: {
        contentBase: './dist',
        hot: true,
        inline: true,
        port: 4000
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: 'Code Splitting',
            template: './index.html',
            filename: 'index.html'
        }),
        new CompressionWebpackPlugin({ //gzip 压缩
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(js|css|scss)$'    //压缩 js、scss 与 css
            ),
            threshold: 10240,
            minRatio: 0.8
        }),
        new webpack.HotModuleReplacementPlugin(),
        // ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
    ],
    optimization: {
        splitChunks: {
            chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async" 
            minSize: 0, // 最小尺寸，默认0
            minChunks: 1, // 最小 chunk ，默认1
            // maxAsyncRequests: 1, // 最大异步请求数， 默认1
            // maxInitialRequests : 1, // 最大初始化请求书，默认1
            // name: function(){}, // 名称，此选项可接收 function
            // cacheGroups:{ // 这里开始设置缓存的 chunks
            //     priority: 0, // 缓存组优先级
            //     vendor: { // key 为entry中定义的 入口名称
            //         chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步) 
            //         test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
            //         name: "vendor", // 要缓存的 分隔出来的 chunk 名称 
            //         minSize: 0,
            //         minChunks: 1,
            //         enforce: true,
            //         maxAsyncRequests: 1, // 最大异步请求数， 默认1
            //         maxInitialRequests : 1, // 最大初始化请求书，默认1
            //         reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
            //     }
            // }
         }
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,     // 根据正则表达式查找哪些文件需要载入指定的loader
                use: ExtractTextPlugin.extract({
                    allChunks: true,
                    fallback: "style-loader",
                    use: ['css-loader', 'sass-loader',]
                })
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    'file-loader',
                    'image-webpack-loader'
                ]
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env'],
                    plugins: [
                        [
                          "import",
                          {
                            "libraryName": "antd",
                            "libraryDirectory": "es",
                            "style": "css"
                          }
                        ],
                        ["transform-react-jsx"]
                      ]
                  }
                }
              }
        ]
    },
    mode: process.env.mode
}